<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html oncontextmenu=self.event.returnValue=false onselectstart="return false">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" href="${base}/layim-v3.7.5/dist/css/layui.css">
    <script src="${base}/layim-v3.7.5/dist/layui.js" charset="utf-8"></script>
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}

	/* #content li{
		/*margin: 10px;*/
		/*margin-left:35px;*/
		margin-bottom:20px;
		display: inline;
		float: left;
		width: 30%;
		height: 100px;
	}

	#content li:nth-child(3n+1){
		margin-left: 3%;
	}
	.show_name{
	} */
</style>
<style>
.layui-find-list li img {
    position: absolute;
    left: 15px;
    top: 8px;
    width: 36px;
    height: 36px;
    border-radius: 100%;
}
.layui-find-list li {
    position: relative;
    height: 90px;;
    padding: 5px 15px 5px 60px;
    font-size: 0;
    cursor: pointer;
}
.layui-find-list li * {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
	overflow: hidden; 
	text-overflow:ellipsis; 
	white-space: nowrap;
}
.layui-find-list li span {
    margin-top: 4px;
    max-width: 155px;
}

.layui-find-list li p {
    display: block;
    line-height: 18px;
    font-size: 12px;
    color: #999;
	overflow: hidden; 
	text-overflow:ellipsis; 
	white-space: nowrap;
}
.back{
	cursor:pointer;
}
.lay_page{position: fixed;bottom: 0;margin-left: -15px;margin-bottom: 20px;background: #fff;width: 100%;}
.layui-laypage{width: 105px;margin:0 auto;display: block}
</style>

<div class="layim-add-box" style="display: none;" id="box">
	<div class="layim-add-img">
		<img class="layui-circle" src="" id="uimg">
		<p id="uname">xxx</p>
	</div>
	<div class="layim-add-remark">
		<p>选择分组</p>
		<select class="layui-select" id="LAY_layimGroup" onchange="tabgroup(this)">

		</select>
	</div>
</div>

<body>

<fieldset class="layui-elem-field">
  <legend>找朋友/群</legend>
	  <div class="layui-field-box layui-form" id="box2">
	  	<input type="text" name="name" required lay-verify="required" placeholder="请输入内容" class="layui-input" style="width: 50%; display: inline;">&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn" style="display: inline;" id="btn_seach"  >搜索</button>
		  <!-- <span style="color: red;">推荐搜索:</span> -->
  	  </div>
</fieldset>
<div class="layui-row " id="content">
				<!-- {{# if(d.type == 'friend'){ }}
					{{#  layui.each(d.data, function(index, item){ }}
					<div class="layui-col-xs3 layui-find-list">
						<li layim-event="add"  >
							<img src="{{ item.avatar }}" >
							<span>{{item.username}}({{item.phone}})</span>
							<p> {{#  if(item.sign == null){  }}我很懒，懒得写签名{{# }else{ }}{{item.sign}} {{# } }} </p>
							<button class="layui-btn layui-btn-xs btncolor add" data-type="friend" data-approval="{{ item.avatar }}"  data-uid="{{ item.id}}" data-name="{{item.username}}"><i class="layui-icon">&#xe654;</i>加好友</button>
						</li>
					</div>
					{{#  }); }}
				{{# }else{ }}
					{{#  layui.each(d.data, function(index, item){ }}
					<div class="layui-col-xs3 layui-find-list">
						<li layim-event="add" >
							<img src="{{ item.avatar }}" >
							<span>{{item.groupname}}({{item.id}})</span>
							<p> {{#  if(item.des == null){  }}暂无群介绍{{# }else{ }}{{item.des}} {{# } }} </p>
							<button class="layui-btn layui-btn-xs btncolor add" data-type="group" data-approval="{{ item.avatar }}" data-uid="{{ item.id }}" data-name="{{item.groupname}}"><i class="layui-icon">&#xe654;</i>加群</button>
						</li>
					</div>
					{{#  }); }}
				{{# } }} -->
			</div>	

<!-- <div>
	<ul id="content" style="width: 990px;">
  	  	<li style="width: 190px; height: 100px;">
  	  		<img style="border-radius: 20px; display: inline;width:100px; height:100px; float: left;" src='/mychat/imgs/1.jpg' >
  	  		<div style="float: left;">
	  	  		<span style="font-size: 24px; color: buttonshadow; margin: 4px; margin-left: 7px;">小明</span>
	  	  		<span style="color:#3FDD86;">在线</span>
	  	  		&lt;!&ndash;<span style="color:#DD691D;">离线</span>&ndash;&gt;
	  	  		<div style="display: block; margin-top: 10px; margin-left: 5px;"><button class="layui-btn layui-btn-radius layui-btn-normal">加好友</button></div>
  	  		</div>
  	  	</li>
  	  </ul>
</div> -->


<script type="text/javascript">

	var layim;
	var layer;
	var laytpl;
	var $;
	var laypage;
	layui.use(['layim', 'laypage','form'], function(){
	   layim = layui.layim
	  ,layer = layui.layer
	  ,laytpl = layui.laytpl
	  ,$ = layui.jquery
	  ,laypage = layui.laypage;


        $.get('${base!}/user/random',function(data){
        	if(data.friend !=null){
	        	for(var i=0;i<data.friend.length;i++){
	        		var othis = data.friend[i];
	        		if(othis.sign ==null){
						othis.sign = '个性签名';
					}
	        		var li = '<div class="layui-col-xs3 layui-find-list"><li id='+othis.id+'> <img src=\''+othis.avatar+'\' ><span>'+othis.username+'</span>' 
					+'<p>'+othis.sign+'</p>"><button class="layui-btn layui-btn-xs btncolor add" data-type="friend" onclick="addFriend(this)">加好友</button> </li></div>';
					$('#content').append(li);
	        		
	        	}
        	}
        	if(data.group !=null){
	        	for(var i=0;i<data.group.length;i++){
	        		var othis = data.group[i];
	        		 if(othis.des ==null||othis.des ==""){
                     	othis.des ="暂无介绍";
                     }
	        		 var li = '<div class="layui-col-xs3 layui-find-list"><li id='+othis.id+'> <img src=\''+othis.avatar+'\' ><span>'+othis.groupname+'</span>' 
						+'<p>'+othis.des+'</p>"><button class="layui-btn layui-btn-xs btncolor add" data-type="group" onclick="innerGroup(this)">加群</button> </li></div>';
                 	 $('#content').append(li);
	        	}
        	}
            for(var i=0; i<data.length; i++){
                
                //$('#box2').append('<span>'+data[i]+'</span>&nbsp;&nbsp;&nbsp;');
			}
        });



	  //查找好友btn
	   $('#btn_seach').click(function(){
		    var name = $.trim($("[name=name]").val());
			if(name == ''){
				layer.alert("请输入要查找的用户名!");
				return;
			}
		   
			$.ajax({
				url:'${base!}/user/seach',
				dataType:'json',
				data:{name:name},
				async:false,
				success:function(data){
					$('#content').text("");
					//console.log(data);
					var users = JSON.parse(data.users);
					var groups = JSON.parse(data.groups);
					var flag = 0;
					if(undefined!=users && users.length>0){
						$(users).each(function(){
							
							var status = "";
							/* if(this.status == 'online'){
								status = "<span style=\"color:#3FDD86;\">在线</span>";
							}else{
								status = "<span style=\"color:#DD691D;\">离线</span>";
							} */
							if(this.sign ==null){
								this.sign = '个性签名';
							}
							var li = '<div class="layui-col-xs3 layui-find-list"><li id='+this.id+'> <img src=\''+this.avatar+'\' ><span>'+this.username+'</span>' 
							+'<p>'+this.sign+'</p>"><button class="layui-btn layui-btn-xs btncolor add" data-type="friend" onclick="addFriend(this)">加好友</button> </li></div>';
							$('#content').append(li);
						});
					}else{
						flag ++;
					}

					if(undefined != groups && groups.length > 0){
                        $(groups).each(function(){
                        	
                            if(this.des ==null||this.des ==""){
                            	this.des ="暂无介绍";
                            }
                            var li = '<div class="layui-col-xs3 layui-find-list"><li id='+this.id+'> <img src=\''+this.avatar+'\' ><span>'+this.groupname+'</span>' 
							+'<p>'+this.des+'</p>"><button class="layui-btn layui-btn-xs btncolor add" data-type="group" onclick="innerGroup(this)">加群</button> </li></div>';

                            $('#content').append(li);
                        });
					}else {
					    flag++
					}

					if(flag == 2){
                        layer.alert("没查询到相关用户!");
                    }

				}

			});
	   });
	   
	});
	
	  var fromgroup = 0;
		
	  //加好友
	  function addFriend(obj){
		 var _obj = obj;
		 var username = $(_obj).parent().find("span").text();
		 var avatar =  $(_obj).parent().find("img").attr('src');
		 var groups = parent.layui.layim.cache().friend;
          var uid = $(_obj).parent().attr('id');
		 var me = '${Session.me}';
		 if(me == uid){
			layer.msg("不能添加自己为好友哦!");
			return;
		 }
		 $('#uimg').attr('src',avatar);
		 $('#uname').text(username);
	     $(groups).each(function(index,item){
	    	 if(index == 0){
	    		 fromgroup = item.id;
	    	 }
	    	 var op = "<option value='"+item.id+"'>"+item.groupname+"</option>";
	    	 $('#LAY_layimGroup').append(op);
		 });

          layim.add({
              type: 'friend'
              ,username: username
              ,avatar: avatar
              ,submit: function(group, remark, index){

                  $.ajax({
		 			  url:'${base!}/user/applyFriend',
		 			  type:'get',
		 			  data:{'uid':uid,'from_group':group,"remark":remark},
		 			  success:function(data){
		 				  //console.log(data);
		 				  if(data.ok == 1){
                              layer.msg('好友申请已发送，请等待对方确认', {
                                  icon: 1
                                  ,shade: 0.5
                              }, function(){
                                  layer.close(index);
                              });

		 					 $('#LAY_layimGroup').text("");
		 				  }else{
		 					 layer.msg(data.msg);
		 					 $('#LAY_layimGroup').text("");
		 				  }
		 			  }
		 		  });
              }
          });

	  }

    //加群
    function innerGroup(obj) {
        var _obj = obj;
        var group_name = $(_obj).parent().find("span").text();
        var avatar = $(_obj).parent().find("img").attr('src');
        var group_id = $(_obj).parent().attr('id');

        $('#uimg').attr('src', avatar);
        $('#uname').text(group_name);
        var me = '${Session.me}';
        layim.add({
            type: 'group'
            , groupname: group_name
            , avatar: avatar
            , submit: function (group, remark, index) {

                $.get('${base!}/user/innerGroup',{'userId': me, 'groupId': group_id, "remark": remark},function (data) {
                    if (data.code == 1) {
						layer.msg('加群申请已发送!', {
							icon: 1
							, shade: 0.5
						}, function () {
							layer.close(index);
						});

						$('#LAY_layimGroup').text("");
					} else {
						layer.msg(data.msg);
						$('#LAY_layimGroup').text("");
					}
                });

            }
        });
    }


	  function tabgroup(obj){
		  fromgroup = $(obj).val();
	  }
</script>
</body>
</html>